<template>
    <div style="width: 100%">
<!--        右上角难易度选择-->
        <a-row style="box-shadow: -3px 2px 7px 2px rgba(0,0,0,0.3);">
            <a-row  style="margin-top: 8%">
                <a-col :offset="3" style="text-align: left">
                    请选择难易度
                </a-col>
            </a-row>
            <a-row style="margin-top: 4%; margin-bottom: 8%">
                <a-radio-group v-model="$store.state.exercise.getPaperInfo.easyChoose" size="large">
                    <a-radio-button value=0>
                        综合
                    </a-radio-button>
                    <a-radio-button value="1">
                        简单
                    </a-radio-button>
                    <a-radio-button value="2">
                        中等
                    </a-radio-button>
                    <a-radio-button value="3">
                        困难
                    </a-radio-button>
                </a-radio-group>
            </a-row>
        </a-row>

        <a-row  style="box-shadow: -3px 2px 7px 2px rgba(0,0,0,0.3); margin-top: 11%;  height: 460px; overflow: auto">
            <!-- 递归渲染题目类型 -->
            <a-row v-for="(item,index) in $store.state.exercise.question_type" v-bind:key="item.id">
                <a-row style="text-align: left; margin-top: 10%">
                    <a-col :offset="1" :span="6">
                        {{item.name}}
                    </a-col>
                    <a-col offset="1" :span="6" style="color:#a3a2a2">
                        ({{item.max}}道试题)
                    </a-col>
                </a-row>
                <a-row style="margin-top: 3%; text-align: right; margin-right: 5%">
                    <a-col>
                        抽选
                        <a-input-number id='index' :precision=0  :min="1" v-model=$store.state.exercise.question_type[index].count :max=$store.state.exercise.question_type[index].max  @change="countChange"/>
                        道题目
                    </a-col>
                </a-row>
                <hr style="width: 90%; border-color: rgba(151, 151, 151, 0.3); margin-top: 3%"/>
            </a-row>

        </a-row>
    </div>
</template>

<script>
    export default {
        name: "ExerciseInfo",
        data() {
            return {
                easyChoose: '0',//level
            };
        },
        methods: {
            countChange(){
                const refresh = this.$store.state.exercise.question_type[0];
                this.$store.state.exercise.question_type.splice(0,1,refresh)
            }
        },
        mounted() { //初始获取题目类型和章节
            this.$store.dispatch('exercise/getQueType').then(
                res=>{
                    if(res.code === 0){
                        this.$message.error(res.msg);
                    }
                }
            ).catch(()=>{
                this.$message.error("网络异常")
            })
        }
    }
</script>

<style scoped>

</style>